<template>
  <div id="home">
    <Hometop
      @getchild='getchild'
      @getjudge='getjudge'
    ></Hometop>
    <ForinLogin v-if="judge"></ForinLogin>
    <van-tabs
      v-model="active"
      title-active-color="#fb7299"
    >
      <van-tab
        v-for="list in datalist"
        :key="list.id"
      >
        <template #title>
          <div @click="handlevidoClick(list._id)">
            {{list.title}}
          </div>
        </template>
        <div
          class="vediodiv"
          ref="scrollRef"
        >
          <div
            class="vedio"
            v-for="vie in vediodatas"
            :key="vie.id"
            ref="vedio"
          >
            <p class="vie_p"><img
                src="../static/images/noContent.png"
                alt=""
                width="100%"
                @click="imgClick(vie.id)"
              ></p>
            <p style="text-align:center;">{{vie.name}}</p>
          </div>
        </div>
        <div
          style="text-align:center;font-size:22px;color:#666;"
          @click="moredatasClick(list._id)"
        >{{pagename}}...</div>
        <Fangtop
          :scrolltopfalt="scrolltopfalt"
          @scrollemit='scrollemit'
        ></Fangtop>
      </van-tab>
    </van-tabs>
  </div>
</template>
<script>
import Hometop from '../components/common/Hometop'
import ForinLogin from '../components/common/ForinLogin'
import Fangtop from '../components/common/fangTop'
import { Toast } from 'vant'
export default {
  data: () => ({
    datalist: [],
    active: 0,
    vediodatas: [],
    judge: false,
    pagesize: 10,
    myid: 9,
    pagename: '加载更多',
    scrolltopfalt: false
  }),
  methods: {
    getchild (active) {
      this.active = active
    },
    getjudge (judge) {
      this.judge = judge
    },
    async handlevidoClick (id) {
      this.pagename = '加载更多'
      this.pagesize = 10
      this.myid = id
      const vedios = await this.$http.detail(this.myid, 1, this.pagesize)
      this.vediodatas = vedios.data
    },
    async imgClick (id) {
      if (sessionStorage.getItem('token')) {
        this.$router.push(
          {
            path: '/play',
            query: {
              id: id
            }
          }
        )
      } else {
        this.judge = !this.judge
        Toast('请先登录')
      }
    },
    async moredatasClick (id) {
      if (sessionStorage.getItem('token')) {
        this.pagesize = this.pagesize += 4
        const vedios = await this.$http.detail(id, 1, this.pagesize)
        if (this.pagesize >= 40 && vedios.data.length >= 40) {
          vedios.data.length = 40
          this.pagesize = 40
          this.pagename = '没有更多了'
        }
        this.myid = id
        this.vediodatas = vedios.data
      } else {
        this.judge = !this.judge
        Toast('请先登录')
        this.pagename = '没有更多了'
      }
    },
    scrollemit (val) {
      this.scrolltopfalt = val
    },
    scroll () {
      if (document.documentElement.scrollTop >= 600) {
        this.scrolltopfalt = true
      } else {
        this.scrolltopfalt = false
      }
    }
  },
  components: {
    Fangtop,
    Hometop,
    ForinLogin
  },
  async created () {
    const res = await this.$http.category()
    this.datalist = res.data
    const vedios = await this.$http.detail(this.myid, 1, this.pagesize)
    this.vediodatas = vedios.data
    if (!sessionStorage.getItem('token')) {
      this.pagename = '没有更多了'
    }
  },
  updated () {
    this.scroll()
  }
}
</script>
<style lang="scss">
.van-tabs__wrap {
  position: fixed;
}
.vediodiv {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  .vedio {
    .vie_p {
      height: 100px;
      margin-bottom: 20px;
      margin: 0 10px;
    }
    width: 50%;
  }
}
</style>
